<!-- 安全考试-学习资源-素材库 -->
<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-left">
      <div class="JNPF-common-title">
        <h2>题目分类</h2>
        <span class="options">
          <el-tooltip content="题目分类" placement="top">
            <el-link icon="el-icon-menu" :underline="false"/>
          </el-tooltip>
        </span>
      </div>

      <el-scrollbar class="JNPF-common-el-tree-scrollbar">
        <el-tree :props="defaultProps"
              accordion :data="treeData"  node-key="id"
          class="JNPF-common-el-tree">
          <span class="custom-tree-node" slot-scope="{ data }">
            <i :class="data.icon" />
            <span class="text">{{data.label}}</span>
          </span>
        </el-tree>
      </el-scrollbar>
    </div>

    <div class="JNPF-common-layout-center">

      <div class="JNPF-common-layout-main JNPF-flex-main">

        <el-tabs v-model="activeName" @tab-click="handleClick">
        
        <el-row class="JNPF-common-search-box" :gutter="16">
          <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="题目名称">
                <el-input v-model="keyword" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>

          <template v-if="showAll">
           <el-col :span="6">
            <el-form-item label="难易程度">
              <el-select v-model="keyword" placeholder="请选择">
                <el-option
                  v-for="item in statelist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          </template>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" >查询</el-button>
              <el-button type="success" icon="el-icon-plus" @click="insert(undefined)">新增</el-button>
              <!-- <el-button type="success" icon="el-icon-download">导出</el-button> -->
              <el-button type="text" icon="el-icon-arrow-down" @click="showAll = true" v-if="!showAll">展开</el-button>
              <el-button type="text" icon="el-icon-arrow-up" @click="showAll = false" v-else>收起</el-button>
            </el-form-item>
          </el-col>
        </el-form>
        </el-row>

          <el-tab-pane label="全部" name="first"> 
            <JNPF-table v-loading="listLoading" :data="list1">
              <el-table-column prop="FCATNAME" label="题目名称"/>
              <el-table-column prop="FCATTYPE" label="题目类型"  width="95" />
              <el-table-column prop="FCATLEVEL" label="难易程度"  width="85"/>
              <el-table-column prop="FBILLCREDATE" label="创建时间"  width="135"/>
              <el-table-column prop="FBILLSTATE" label="状态" width="85"/>
            </JNPF-table>
            <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />
            <Form ref="Form" :parelist="list1" />
          </el-tab-pane>

          <el-tab-pane label="单选题" name="second">
            <JNPF-table v-loading="listLoading" :data="list2">
              <el-table-column prop="FCATNAME" label="题目名称"/>
              <el-table-column prop="FCATTYPE" label="题目类型"  width="95" />
              <el-table-column prop="FCATLEVEL" label="难易程度"  width="85"/>
              <el-table-column prop="FBILLCREDATE" label="创建时间"  width="135"/>
              <el-table-column prop="FBILLSTATE" label="状态" width="85"/>
            </JNPF-table>
            <pagination :total="total" :page.sync="listQuery.currentPage":limit.sync="listQuery.pageSize" />
          </el-tab-pane>

          <el-tab-pane label="多选题" name="third">
            <JNPF-table v-loading="listLoading" :data="list3">
              <el-table-column prop="FCATNAME" label="题目名称"/>
              <el-table-column prop="FCATTYPE" label="题目类型"  width="95" />
              <el-table-column prop="FCATLEVEL" label="难易程度"  width="85"/>
              <el-table-column prop="FBILLCREDATE" label="创建时间"  width="135"/>
              <el-table-column prop="FBILLSTATE" label="状态" width="85"/>
            </JNPF-table>
            <pagination :total="total" :page.sync="listQuery.currentPage":limit.sync="listQuery.pageSize" />

          </el-tab-pane>

          <el-tab-pane label="判断题" name="fourth">
            <JNPF-table v-loading="listLoading" :data="list4">
              <el-table-column prop="FCATNAME" label="题目名称"/>
              <el-table-column prop="FCATTYPE" label="题目类型"  width="95" />
              <el-table-column prop="FCATLEVEL" label="难易程度"  width="85"/>
              <el-table-column prop="FBILLCREDATE" label="创建时间"  width="135"/>
              <el-table-column prop="FBILLSTATE" label="状态" width="85"/>
            </JNPF-table>
            <pagination :total="total" :page.sync="listQuery.currentPage":limit.sync="listQuery.pageSize" />

          </el-tab-pane>

          <el-tab-pane label="填空题" name="five">
            <JNPF-table v-loading="listLoading" :data="list5">
              <el-table-column prop="FCATNAME" label="题目名称"/>
              <el-table-column prop="FCATTYPE" label="题目类型"  width="95" />
              <el-table-column prop="FCATLEVEL" label="难易程度"  width="85"/>
              <el-table-column prop="FBILLCREDATE" label="创建时间"  width="135"/>
              <el-table-column prop="FBILLSTATE" label="状态" width="85"/>
            </JNPF-table>
            <pagination :total="total" :page.sync="listQuery.currentPage":limit.sync="listQuery.pageSize" />

          </el-tab-pane>

          <el-tab-pane label="简答题" name="six">
            <JNPF-table v-loading="listLoading" :data="list5">
              <el-table-column prop="FCATNAME" label="题目名称"/>
              <el-table-column prop="FCATTYPE" label="题目类型"  width="95" />
              <el-table-column prop="FCATLEVEL" label="难易程度"  width="85"/>
              <el-table-column prop="FBILLCREDATE" label="创建时间"  width="135"/>
              <el-table-column prop="FBILLSTATE" label="状态" width="85"/>
            </JNPF-table>
            <pagination :total="total" :page.sync="listQuery.currentPage":limit.sync="listQuery.pageSize" />
          </el-tab-pane>

          <el-tab-pane label="视频" name="seven">
            <JNPF-table v-loading="listLoading" :data="list7">
              <el-table-column prop="FCATNAME" label="题目名称"/>
              <el-table-column prop="FCATTYPE" label="题目类型"  width="95" />
              <el-table-column prop="FCATLEVEL" label="难易程度"  width="85"/>
              <el-table-column prop="FTIME" label="视频时长"  width="135"/>
              <el-table-column prop="FBILLCREDATE" label="创建时间"  width="135"/>
              <el-table-column prop="FBILLSTATE" label="状态" width="85"/>
            </JNPF-table>
            <pagination :total="total" :page.sync="listQuery.currentPage":limit.sync="listQuery.pageSize" />
          </el-tab-pane>

      </el-tabs>

       
      </div>

    </div>
  </div>
</template>

<script>
import Form from "./Form.vue"
export default {
  name: 'base05',
  components: { Form },
  data() {
    return {
      activeName: 'first',

      keyword: '',
      showAll:false,
      list: [],
      statelist:[
        {value:0,label:"全部"}
        ,{value:1,label:"未审核"}
        ,{value:2,label:"已审核"}
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      treeData: [{
          label: "化学与材料科学学院",
          children: [{
            label: "化学系",
            children: [{
              label: "安全考试"
            },{
              label: "实操考试"
            }]
          },{
            label: "化工与材料系",
            children: [{
              label: "安全考试"
            },{
              label: "实操考试"
            }]
          },{
            label: "分析测试中心",
            children: [{
              label: "安全考试"
            },{
              label: "实操考试"
            }]
          }]
        }, {
          label: "生命科学学院",
          children: [{
            label: "生物科学",
            children: [{
              label: "安全考试"
            },{
              label: "实操考试"
            }]
          },{
            label: "生物技术",
            children: [{
              label: "安全考试"
            },{
              label: "实操考试"
            }]
          }]
        }
         ],
      total: 0,
      listLoading: false,
      listQuery: {
          page: 1,
          limit: 20,
          sort: "desc",
          sidx: "",
          fcatno: "",
          fcatname: ""
        },
      formVisible: false,

      // 参考题库 https://max.book118.com/html/2024/1024/6021020025010235.shtm
      //https://wenku.baidu.com/tfview/aea88bcba98271fe900ef943.html?fr=launch_ad&SS-bdtg47=&utm_source=bdss-WD&utm_medium=cpc&keyword=%E9%AB%98%E6%A0%A1%E5%AE%9E%E9%AA%8C%E5%AE%A4%E5%AE%89%E5%85%A8%E8%80%83%E8%AF%95%E9%A2%98%E5%BA%93%E7%AD%94%E6%A1%88&utm_account=SS-bdtg47&utm_term=5&utm_content=4&e_creative=59921291097&e_keywordid=416730695876&bd_vid=9336939463705346823&_wkts_=1734261811500&needWelcomeRecommand=1
      list1:[
            {
            "FCATNAME": "易燃化学试剂理想存放温度是多少?运行存放最高室温不得超过多少?",
            "FCATTYPE": "单选题",
            "FCATLEVEL":"☆☆☆",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },{
            "FCATNAME": "a射线是下列哪种原子核",
            "FCATTYPE": "单选题",
            "FCATLEVEL":"☆☆☆",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            }
            ,{
            "FCATNAME": "对于相同厚度的下列物质,对IMeV能力的y涉嫌屏蔽效果好的是",
            "FCATTYPE": "单选题",
            "FCATLEVEL":"☆☆☆",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },{
            "FCATNAME": "剂量与点源距离的关系为",
            "FCATTYPE": "单选题",
            "FCATLEVEL":"☆☆☆",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },{
            "FCATNAME": "发生火宅时,单位或个人应该先自救,当自救无效、火越着越大时,再拨打火警电话119",
            "FCATTYPE": "判断题",
            "FCATLEVEL":"☆☆☆",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },{
            "FCATNAME": "各种电源是否有电,可用试电笔检验",
            "FCATTYPE": "判断题",
            "FCATLEVEL":"☆☆☆",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },
        ],

        list2:[
            {
            "FCATNAME": "易燃化学试剂理想存放温度是多少?运行存放最高室温不得超过多少?",
            "FCATTYPE": "单选题",
            "FCATLEVEL":"☆☆☆",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },{
            "FCATNAME": "a射线是下列哪种原子核",
            "FCATTYPE": "单选题",
            "FCATLEVEL":"☆☆☆",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            }
            ,{
            "FCATNAME": "对于相同厚度的下列物质,对IMeV能力的y涉嫌屏蔽效果好的是",
            "FCATTYPE": "单选题",
            "FCATLEVEL":"☆☆☆",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },{
            "FCATNAME": "剂量与点源距离的关系为",
            "FCATTYPE": "单选题",
            "FCATLEVEL":"☆☆☆",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            }
        ],

        list4:[
            {
            "FCATNAME": "发生火宅时,单位或个人应该先自救,当自救无效、火越着越大时,再拨打火警电话119",
            "FCATTYPE": "判断题",
            "FCATLEVEL":"☆☆☆",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },{
            "FCATNAME": "各种电源是否有电,可用试电笔检验",
            "FCATTYPE": "判断题",
            "FCATLEVEL":"☆☆☆",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },
        ],

        list7:[
            {
            "FCATNAME": "化学品贮存教学视频",
            "FCATTYPE": "化学系操作安全",
            "FCATLEVEL":"☆☆☆",
            "FTIME":"20(分钟)",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },{
            "FCATNAME": "危险品安全存放视频",
            "FCATTYPE": "化学系操作安全",
            "FCATLEVEL":"☆☆☆",
            "FTIME":"15(分钟)",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            }
            ,{
            "FCATNAME": "化学废弃物处置视频",
            "FCATTYPE": "化学系操作安全",
            "FCATLEVEL":"☆☆☆",
            "FTIME":"10(分钟)",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },{
            "FCATNAME": "消毒视频",
            "FCATTYPE": "生物系操作安全",
            "FCATLEVEL":"☆☆☆",
            "FTIME":"5(分钟)",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },{
            "FCATNAME": "生物废弃物处置",
            "FCATTYPE": "生物系操作安全",
            "FCATLEVEL":"☆☆☆",
            "FTIME":"10(分钟)",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },{
            "FCATNAME": "误使用潜在有毒物质处置",
            "FCATTYPE": "生物系操作安全",
            "FCATLEVEL":"☆☆☆",
            "FTIME":"10(分钟)",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },
        ],
    }
  },
  created() {
  },
  methods: {
   initData(){
     console.log("initData")
   },

   insert(row) {
        this.$refs.Form.init(row);
      },
  }
}
</script>